<template>
	<view>
		<!-- #ifndef MP -->
		<view class="sys-head" :style="{ height: statusBarHeight }"></view>
		<!-- #endif -->
		<!-- <searchNavbar :parameter="parameter" :isMap="isMap"></searchNavbar> -->
		<searchNavbar :parameter="parameter" :isMap="isMap" :openSysHeight="true" bs="indexList"
			@cityChange="cityChange"></searchNavbar>
		<!-- 导航栏 -->
		<!-- <navTabFilter :categoryList="categoryList" @changeCategoryOn="changeCategoryOn"></navTabFilter> -->
		<!-- <dropdown-screen></dropdown-screen> -->
		<!-- <u-loading-page bg-color="#e8e8e8" :loading="loading"></u-loading-page> -->
		<!-- <view class="sort-box">
			<scroll-view scroll-x="true" style="white-space: nowrap; display: flex;">
				<view v-for="(item,index) in sortList" :key="index" :class="['sort',sortOn==index?'sort-on':'']"
					@click="sortOn=index">{{item}}</view>
			</scroll-view>
		</view> -->
		<!-- 全部 -->
		<view class="list all" v-if="categoryOn==0">
			<view class="item" v-for="item in DataList" :key="item.id"
				@click="toPage('/pages/details/brand/brand?id='+item.id)">
				<!-- <view class="acea-row row-middle row-between top-info">
					<view></view>
					<view class="close">×</view>
				</view> -->
				<view class="acea-row row-middle row-between sell-goods">
					<view class="goods-img">
						<image :src="item.logoImage" mode="" class="img"></image>
					</view>
					<view class="acea-row row-column-between goods-info">
						<view class="acea-row row-middle row-between title">
							<view class="title-50 line1">
								{{ item.realname }}
							</view>
							<view class="gray-dark">
								{{item.store || 0}}家门店
							</view>
						</view>
						<view class="acea-row row-middle goods-type">
							<!-- <view class="">
								{{ item.businessId }}
							</view> -->
							<view class="gray-light">
								￥{{item.consumeMoney}}/人
							</view>
						</view>
						<view class="goods-type">
							<!-- 面积 100-200㎡ -->
						</view>
						<view class="sell-price">
							<!-- <text>1000</text>元/月/平米 	 -->
						</view>
						<view class="gray-light">
							选址 {{item.selection || 0}} ·加盟 {{item.join || 0}} · 供应链 {{item.supp || 0}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 选址 -->
		<view class="list rent-ask" v-if="categoryOn==1">
			<view class="item" v-for="item in DataList" :key="item.id">
				<view class="acea-row row-middle row-between top-info">
					<view></view>
					<view class="close">×</view>
				</view>
				<view class="title line1">
					{{ item.title }}
				</view>
				<view class="acea-row goods-tag">
					<view class="tag" v-for="(storeItem,index) in item.storeAdvantage" :key="storeItem">{{ storeItem }}
					</view>
				</view>
				<view class="acea-row row-between row-middle contact-box">
					<view class="acea-row row-middle contact-info">
						<image src="@/static/images/f.png" mode=""></image>
						<view class="name" v-if="item.contacts[0]">
							<view class="line1">联系人：{{ item.contacts[0].contactName }}</view>
							<view class="line1">
								联系电话：{{ item.contacts[0].contactPhone.replace(/(\d{3})\d*(\d{4})/,'$1****$2')}}</view>
						</view>
					</view>
					<view class="visit-l">
						<view class="visit-num">5866人咨询</view>
						<view class="visit-btn" @click="toConcat(item.contacts)">
							立即咨询
						</view>
					</view>
				</view>
				<view class="acea-row row-middle distance">
					<image src="@/static/images/location_gray.png" mode=""></image>
					<text>距您{{item.distance}}km</text>
				</view>
				<!-- 浏览、咨询统计 -->
				<view class="acea-row row-middle row-between visit-box">
					<view class="visit-advtar">
						<image src="@/static/images/f.png" mode="" v-for="(item,index) in item.view" :key="index"
							:style="{left: (20 * index) + 'rpx'}"></image>
					</view>
					<view class="acea-row row-middle row-between visit-l">
						<view class="visit-num">{{item.view}}人浏览</view>
						<view class="visit-num">已成功匹配9888人</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 布点 -->
		<view class="list all" v-if="categoryOn==2">
			<view class="item" v-for="(item,index) in DataList" :key="item.id">
				<view class="acea-row row-middle row-between top-info">
					<view></view>
					<view class="close">×</view>
				</view>
				<view class="acea-row row-middle row-between sell-goods">
					<view class="goods-img">
						<image :src="item.image" mode="" class="img"></image>
					</view>
					<view class="acea-row row-column-between goods-info">
						<view class="acea-row row-middle row-between title">
							{{ item.storename }}
						</view>
						<view class="acea-row row-middle goods-type">
							<view class="">
								{{ item.business }}
							</view>
							<view class="gray-light">
								￥{{ item.consumption || 0 }}/人
							</view>
						</view>
						<view class="goods-type">
							面积 {{ item.area || 0}}㎡
						</view>
						<view class="acea-row row-middle starts">
							<image src="/static/images/startRed.png" mode=""
								v-for="(avgScore,index) in Number(item.avgScore)" :key="avgScore"></image>
							<view class="">{{ item.avgScore }}分</view>
						</view>
						<view class="gray-light">
							{{ item.address }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 加盟 -->
		<view class="list all" v-if="categoryOn==3">
			<view class="item" v-for="(item,index) in DataList" :key="item.id">
				<view class="acea-row row-middle row-between top-info">
					<view></view>
					<view class="close">×</view>
				</view>
				<view class="acea-row row-middle row-between sell-goods">
					<view class="goods-img">
						<image :src="item.image" mode="" class="img"></image>
					</view>
					<view class="acea-row row-column-between goods-info">
						<view class="acea-row row-middle row-between title">
							{{ item.title }}
						</view>

						<view class="sell-price">
							<text>{{ item.franchiseFee }}</text>万元
						</view>
						<view class="gray-light">
							加盟城市：{{ item.franchiseRegion }}
						</view>
						<view class="gray-light">
							{{ item.address }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 供应链 -->
		<view class="list supplychain" v-if="categoryOn==4">
			<view class="item" v-for="(item,index) in DataList" :key="item.id">
				<!-- <view class="acea-row row-middle row-between top-info">
					<view>3天内更新</view>
					<view class="close">×</view>
				</view> -->
				<view class="acea-row row-middle row-between sell-goods">
					<view class="goods-img">
						<image :src="item.image" mode="" class="img"></image>
						<view class="tag line1">
							好货上新
						</view>
						<!-- <view class="acea-row row-middle distance">
							<image src="@/static/images/location.png" mode=""></image>
							<text>距您1.4km</text>
						</view> -->
					</view>
					<view class="acea-row row-column-between goods-info">
						<view class="title line2">
							{{ item.name }} | {{ item.categoryName || '无' }} | {{ item.stock || 0 }}套
						</view>
						<view class="sell-price">
							售价：<text>{{ item.price }}</text>元
						</view>
						<view class="gold-coin">
							<image src="@/static/images/goldcoin_icon.png" mode=""></image>
							<view class="num">25800</view>
						</view>
						<view class="acea-row goods-tag">
							<view class="tag" v-for="keyword in item.keyword" :key="keyword">{{ keyword }}</view>
						</view>

					</view>
				</view>

				<view class="acea-row row-middle row-between visit-box">
					<view class="visit-advtar-box">
						<view class="visit-advtar">
							<image src="@/static/images/f.png" mode="" v-for="(item,index) in Number(item.browse)"
								:key="index" :style="{left: (30 * index) + 'rpx'}"></image>
						</view>
						<view class="visit-num">{{ item.browse }}人浏览 已成功匹配12254人</view>
					</view>

					<view class="visit-l">
						<view class="visit-num">5866人咨询</view>
						<view class="visit-btn" @click="toConcat(item.contacts)">
							立即咨询
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-loading-icon :show="loadingShow"></u-loading-icon>
		<!-- 广告位 -->
		<!-- <view class="adver">
			<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000"
				indicator-active-color="#ddd">
				<swiper-item>
					<view class="swiper-item"></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"></view>
				</swiper-item>
			</swiper>
		</view> -->
		<!-- <view :style="'height:' + navH + 'rpx'"></view> -->
<!-- 		<view class="uni-p-b-98">

		</view> -->
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	import searchNavbar from '../components/searchNavbar/searchNavbar.vue'
	import navTabFilter from '../components/navTabFilter/navTabFilter.vue'
	import dropdownScreen from '../components/dropdown-brand/dropdown-brand'
	import {
		toPage
	} from '@/filters/commFilter.js'
	import {
		getBrandListApi,
		getAgentListApi
	} from '@/api/brand/index.js'
	import {
		getGroupListApi
	} from '@/api/subletOfShop.js'
	import {
		getPointListApi
	} from '@/api/recruit.js'
	import {
		SecondhandAdd
	} from '@/api/supplyChain.js'
	export default {
		components: {
			searchNavbar,
			navTabFilter,
			dropdownScreen
		},
		onReachBottom() {
			if (this.page >= this.totalPage) return
			this.loadingShow = true
			this.page += 1;
			this.initData()
		},
		data() {
			return {
				visitInfo: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				statusBarHeight: statusBarHeight,
				parameter: {
					return: 1,
					placeholder: '请输入品牌',
					categoryType: 13
				},
				isMap: true,
				isLeft: 0, //导航栏下划线位置
				isWidth: 0, //每个导航栏占位
				tabLeft: 0,
				categoryList: ['全部', '选址', '布点', '加盟', '供应链'],
				categoryOn: 0,
				sortList: ['全部', '出租', '转让', '求租', '出售'],
				sortOn: 0,
				show: false,
				filtrateShow: false,
				page: 1,
				DataList: [], //列表
				loading: true,
				totalPage: 0,
				loadingShow: false
			};
		},
		created() {
			var that = this
			// 获取设备宽度
			uni.getSystemInfo({
				success(e) {
					that.isWidth = e.windowWidth / 5
				}
			});
			this.initData()
		},

		methods: {
			toPage,
			//获取全部品牌列表
			async getBrandList() {
				try {
					let {
						data
					} = await getBrandListApi({
						page: this.page,
						limit: 10
					});
					return data
				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			cityChange() {
				// this.$refs.ntf.reset();
				// this.search={};
				// this.getDistict();
				// this.page = 1;
				// this.list = [];
				// this.getList();
			},
			//获取选址列表
			async getGroupList() {
				try {
					let {
						data
					} = await getGroupListApi({
						page: this.page,
						limit: 10,
						...this.$location
					});
					data.list = data.list.map(item => {
						item.storeAdvantage = item.storeAdvantage.split('/');
						item.distance = Number(item.distance).toFixed(2);
						item.view = item.view || 0
						return item
					})
					return data

				} catch (e) {
					console.log(e)
					//TODO handle the exception
				}
			},
			//获取布点列表
			async getPointList() {
				try {
					let {
						data
					} = await getPointListApi({
						page: this.page,
						limit: 10
					});
					data.list = data.list.map(item => {
						item.avgScore = item.avgScore || 0;
						return item
					});
					return data
				} catch (e) {
					//TODO handle the exception
				}
			},
			//获取加盟列表
			async getAgentList() {
				try {
					let {
						data
					} = await getAgentListApi({
						page: this.page,
						limit: 10
					});
					return data
				} catch (e) {
					//TODO handle the exception
				}
			},
			//获取供应链列表
			async getSupplyChainList() {
				try {
					let {
						data
					} = await SecondhandAdd({
						page: this.page,
						limit: 10
					});
					data.list = data.list.map(item => {
						item.keyword = item.keyword.split(',');
						return item
					})
					return data
				} catch (e) {
					//TODO handle the exception
				}
			},
			changeCategoryOn(e) {
				this.categoryOn = e;
				this.DataList = [];
				this.page = 1;
				this.initData()
			},
			//初始化
			async initData() {
				this.loading = true;
				let data = '';
				switch (this.categoryOn) {
					case 0:
						data = await this.getBrandList();
						break;
					case 1:
						data = await this.getGroupList();
						break;
					case 2:
						data = await this.getPointList();
						break;
					case 3:
						data = await this.getAgentList();
						break;
					case 4:
						data = await this.getSupplyChainList();
						break;
					default:
						break;
				}
				this.DataList = this.DataList = [...this.DataList, ...data.list];
				this.totalPage = data.totalPage;
				this.loading = false;
				this.loadingShow = false;
			},
			filterClick() {
				this.show = !this.show;
				this.filtrateShow = true
			},
			filtrateConfirm() {
				this.show = false
				this.filtrateShow = false
			},
			filtrateReset() {
				this.show = false
				this.filtrateShow = false
			},
			longClick(index) {
				if (this.categoryList.length > 5) {
					var tempIndex = index - 2;
					tempIndex = tempIndex <= 0 ? 0 : tempIndex;
					this.tabLeft = (index - 2) * this.isWidth //设置下划线位置
				}
				this.categoryOn = index;
				this.isLeft = index * this.isWidth //设置下划线位置
			},
			toConcat(contact) {
				if (!contact || contact.length < 1) {
					this.$util.Tips({
						title: '暂未获取到联系人'
					})
					return;
				}

				getApp().globalData.into_singleChatRoom({
					phone:contact[0].contactPhone,
					contactId:contact[0].contactId,
				})
			},
		}
	}
</script>

<style lang="scss">
	.sort-box {
		width: 100%;
		padding: 0rpx 30rpx 18rpx;
		background: #ffffff;

		.sort {
			display: inline-block;
			white-space: nowrap;
			border-radius: 10rpx;
			background: rgba(247, 247, 247, 1);
			padding: 12rpx 36rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(50, 50, 51, 1);
			margin-right: 18rpx;
		}

		.sort-on {
			color: #ffffff;
			background: rgba(238, 33, 45, 1);
		}
	}

	// 列表
	.list {
		padding: 32rpx;

		.item {
			margin-bottom: 32rpx;
			border-radius: 10rpx;
			background: #ffffff;
			padding: 24rpx;
			overflow: hidden;

			.top-info {
				margin-bottom: 16rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(191, 186, 186, 1);

				.close {
					font-size: 36rpx;
				}
			}

		}
	}

	// 全部、布点
	.all {
		.sell-goods {
			.goods-img {
				width: 256rpx;
				height: 236rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				background-color: #cccccc;

				.img {
					width: 100%;
					height: 100%;
				}

				.tag {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: rgba(238, 33, 45, 1);
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.tag-green {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: #43CF7C;
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.distance {
					width: 100%;
					padding: 12rpx;
					background: rgba(0, 0, 0, .3);
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					image {
						width: 14rpx;
						height: 18rpx;
						margin-right: 12rpx;
					}

					position: absolute;
					bottom: 0;
					left: 0;
				}
			}

			.goods-info {
				width: calc(100% - 268rpx);
				height: 236rpx;
				padding: 10rpx 20rpx;
				.gray-light {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
				}

				.gray-dark {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(128, 128, 128, 1);
				}

				.title-50 {
					width: 50%;
				}

				.title {
					width: 100%;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(56, 56, 56, 1);
				}

				.goods-type {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);
				}

				.starts {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);

					image {
						width: 24rpx;
						height: 24rpx;
						margin-right: 6rpx;
					}
				}

				.sell-price {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 36rpx;
						font-weight: 700;
					}
				}

				.transfer-price {
					margin-left: 18rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(56, 56, 56, 1);

					text {
						font-weight: 700;
					}
				}

				.gold-coin {
					width: 148rpx;
					max-width: 100%;
					padding: 4rpx 12rpx;
					// height: 36rpx;
					border-radius: 20rpx;
					background: rgba(255, 195, 0, 1);
					border: 1px solid rgba(255, 235, 59, 1);
					position: relative;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.num {
						margin-left: 36rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}

				.goods-tag {
					.tag-tit {
						padding: 6rpx 0rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(250, 92, 103, 1);
					}

					.tag {
						white-space: nowrap;
						border-radius: 4px;
						background: rgba(255, 232, 234, 1);
						padding: 6rpx 8rpx;
						margin-right: 12rpx;
						margin-bottom: 6rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}

					.tag:last-child {
						margin-right: 0;
					}
				}
			}
		}

		// 适合场所

		.suitable-box {
			margin-top: 34rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(82, 104, 139, 1);

			// padding-bottom: 30rpx;
			// border-bottom: 1px solid rgba(238, 238, 238, 1);
			.suitable {
				display: inline-block;
				letter-spacing: 0.4rpx;
				padding: 10rpx;
				border-radius: 4rpx;
				background: rgba(248, 249, 253, 1);
				margin-left: 12rpx;
				white-space: nowrap;
			}
		}

		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar-box {
				width: 70%;

				.visit-num {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-top: 26rpx;
				}

				.visit-advtar {
					width: 100%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}
			}

			.visit-l {
				width: 30%;

				.visit-num {
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-bottom: 12rpx;
				}

				.visit-btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					opacity: 1;
					border-radius: 30rpx;
					background: rgba(238, 33, 45, 1);
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}


		}
	}

	// 选址
	.rent-ask {
		.title {
			width: 100%;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(56, 56, 56, 1);
		}

		.goods-tag {
			margin-top: 18rpx;

			.tag {
				white-space: nowrap;
				border-radius: 4px;
				background: rgba(255, 232, 234, 1);
				padding: 6rpx 12rpx;
				margin-right: 12rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}

			.tag:last-child {
				margin-right: 0;
			}
		}

		.contact-info {
			width: 70%;

			image {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
			}

			.name {
				width: calc(100% - 100rpx);
				height: 70rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(128, 128, 128, 1);
				margin-left: 24rpx;
			}
		}

		.visit-l {
			width: 30%;

			.visit-num {
				text-align: center;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				margin-bottom: 12rpx;
			}

			.visit-btn {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				opacity: 1;
				border-radius: 30rpx;
				background: rgba(238, 33, 45, 1);
				text-align: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
			}
		}

		.distance {
			width: 100%;
			padding: 0 12rpx 12rpx;
			font-size: 22rpx;
			font-weight: 400;
			color: rgba(166, 166, 166, 1);

			image {
				width: 18rpx;
				height: 24rpx;
				margin-right: 6rpx;
			}
		}

		// 浏览咨询统计
		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar {
				width: 40%;
				height: 46rpx;
				position: relative;

				image {
					width: 46rpx;
					height: 46rpx;
					border-radius: 50%;
					position: absolute;
				}
			}

			.visit-l {
				width: 60%;
				height: 46rpx;

				.visit-num {
					font-size: 26rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
				}
			}

		}

	}

	// 供应链
	.supplychain {
		.sell-goods {
			.goods-img {
				width: 256rpx;
				height: 216rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;
				background-color: #cccccc;

				.img {
					width: 100%;
					height: 100%;
				}

				.tag {
					padding: 0 6rpx;
					max-width: 356rpx;
					height: 36rpx;
					border-radius: 0px 10rpx 0px 10rpx;
					background: rgba(67, 207, 124, 1);
					font-size: 26rpx;
					font-weight: 500;
					color: rgba(255, 255, 255, 1);
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}

				.distance {
					width: 100%;
					padding: 12rpx;
					background: rgba(0, 0, 0, .3);
					font-size: 22rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);

					image {
						width: 14rpx;
						height: 18rpx;
						margin-right: 12rpx;
					}

					position: absolute;
					bottom: 0;
					left: 0;
				}
			}

			.goods-info {
				width: calc(100% - 268rpx);
				height: 218rpx;

				.title {
					width: 100%;
					font-size: 30rpx;
					font-weight: 500;
					color: rgba(56, 56, 56, 1);
				}

				.sell-price {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(238, 33, 45, 1);

					text {
						font-size: 36rpx;
						font-weight: 700;
					}
				}

				.gold-coin {
					width: 148rpx;
					max-width: 100%;
					padding: 4rpx 12rpx;
					// height: 36rpx;
					border-radius: 20rpx;
					background: rgba(255, 195, 0, 1);
					border: 1px solid rgba(255, 235, 59, 1);
					position: relative;

					image {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 0;
						top: 0;
					}

					.num {
						margin-left: 36rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: rgba(255, 255, 255, 1);
					}
				}

				.goods-tag {
					.tag {
						white-space: nowrap;
						border-radius: 4px;
						background: rgba(255, 232, 234, 1);
						padding: 6rpx 8rpx;
						margin-right: 12rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(238, 33, 45, 1);
					}

					.tag:last-child {
						margin-right: 0;
					}
				}
			}
		}

		.visit-box {
			padding: 30rpx 0;
			margin-top: 30rpx;
			border-top: 1px solid rgba(238, 238, 238, 1);

			.visit-advtar-box {
				width: 70%;

				.visit-num {
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-top: 26rpx;
				}

				.visit-advtar {
					width: 100%;
					height: 46rpx;
					position: relative;

					image {
						width: 46rpx;
						height: 46rpx;
						border-radius: 50%;
						position: absolute;
					}
				}
			}

			.visit-l {
				width: 30%;

				.visit-num {
					text-align: center;
					font-size: 24rpx;
					font-weight: 400;
					color: rgba(166, 166, 166, 1);
					margin-bottom: 12rpx;
				}

				.visit-btn {
					width: 200rpx;
					height: 60rpx;
					line-height: 60rpx;
					opacity: 1;
					border-radius: 30rpx;
					background: rgba(238, 33, 45, 1);
					text-align: center;
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}


		}
	}

	// 广告位
	.adver {
		height: 122rpx;
		margin: 32rpx;
		border-radius: 10rpx;
		overflow: hidden;

		swiper,
		swiper-item {
			width: 100%;
			height: 100%;
		}

		.swiper-item {
			width: 100%;
			height: 100%;
			background-color: #ffc83c;
		}
	}
</style>